<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品编码" prop="likeGoodsId">
        <el-input
          v-model="queryParams.likeGoodsId"
          placeholder="请输入商品编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货编号" prop="collectId">
        <el-input
          v-model="queryParams.collectId"
          placeholder="请输入收货编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品型号" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入商品型号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品规格" prop="printing">
        <el-input
          v-model="queryParams.printing"
          placeholder="请输入商品规格"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品串号" prop="goodsSn">
        <el-input
          v-model="queryParams.goodsSn"
          placeholder="请输入商品串号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="回收价格" prop="costPrice">
        <el-input
          v-model="queryParams.costPrice"
          placeholder="请输入回收价格"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="确认状态" prop="confirmStatus">
        <el-select v-model="queryParams.confirmStatus" placeholder="请选择确认状态" clearable size="small">
          <el-option label="已确认" :value="1" />
          <el-option label="待确认" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态" prop="goodsStatus">
        <el-select v-model="queryParams.goodsStatus" placeholder="请选择商品状态" clearable size="small">
          <el-option label="正常" :value="1" />
          <el-option label="借出中" :value="2" />
          <el-option label="丢失中" :value="3" />
          <el-option label="作废" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="价格区间">
        <el-input type="number" @change="minPriceChange" size="small"
                  v-model="queryParams.minPrice"
                  placeholder="最小价格" style="width: 120px;" />
        -
        <el-input type="number" @change="maxPriceChange" size="small"
                  v-model="queryParams.maxPrice"
                  placeholder="最大价格" style="width: 120px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['recovery:goods:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="goodsList" :row-class-name="setRowClassName">
      <el-table-column label="商品编码" align="center" prop="goodsId" width="180" />
      <el-table-column label="收货编号" align="center" prop="collectId" width="80" />
      <el-table-column label="型号" align="center" prop="goodsName" width="220" show-overflow-tooltip />
      <el-table-column label="规格" align="center" prop="printing" width="150" show-overflow-tooltip />
      <el-table-column label="IMEI" align="center" prop="goodsSn" width="160" />
      <el-table-column label="回收价格" align="center" prop="costPrice" width="120">
        <template v-slot="scope">
          <el-tag type="info" @click="priceClick(scope.row)">{{scope.row.emptyPrice == null ? '***' : scope.row.emptyPrice}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="仓库" align="center" prop="stockId" :formatter="stockFormatter"/>
      <el-table-column label="仓位" align="center" prop="locationStr" width="100" />
      <el-table-column label="确认状态" align="center" prop="confirmStatus" width="100">
        <template v-slot="scope">
          <el-tag v-if="scope.row.confirmStatus === 2" type="warning">待确认</el-tag>
          <el-tag v-else type="info">已确认</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" align="center" prop="goodsStatus" width="100">
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.goodsStatus === 1">正常</el-tag>
          <el-tag type="warning" v-else-if="scope.row.goodsStatus === 2">借出中</el-tag>
          <el-tag type="danger" v-else-if="scope.row.goodsStatus === 3">丢失中</el-tag>
          <el-tag type="info" v-else>作废</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="收货时间" align="center" prop="createTime" width="120">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope" v-if="stockInfo != null">
          <el-button
            size="mini"
            type="text"
            @click="handleSearch(scope.row)"
          >详情</el-button>
          <el-button size="mini" type="text" v-if="stockInfo.type === 'manage'" @click="handleManage(scope.row)">打理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :visible.sync="open" :title="title" width="80%" append-to-body @close="goodsDetailCancel">
      <goods-detail :prop-goods-id="selGoodsId" />
    </el-dialog>

    <el-dialog :visible.sync="manageOpen" title="添加打理记录" append-to-body width="500px">
      <el-form ref="manageForm" label-width="80px">
        <el-form-item label="商品编码">{{manageForm.goodsId}}</el-form-item>
        <el-form-item label="商品名称">{{manageForm.goodsName}}</el-form-item>
        <el-form-item label="打理类型" required>
          <el-select v-model="manageForm.type" placeholder="请选择打理类型" >
            <el-option v-for="item in handleTypeOption" :value="item.dictValue" :label="item.dictLabel" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="manageForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="manageSubmitForm">确 定</el-button>
        <el-button @click="manageOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {voidListGoods, exportGoods,} from "@/api/recovery/goods";
import {listStock, getStock} from "@/api/recovery/stock"
import {listPriceLog} from "@/api/recovery/priceLog";
import GoodsDetail from "@/views/recovery/goods/componets/goods-detail.vue";
import {getDicts} from "@/api/system/dict/data";
import {addArrange} from "@/api/recovery/arrange";

export default {
  name: "GoodsStock",
  components: {
    GoodsDetail
  },
  data() {
    return {
      handleTypeOption: [],
      manageOpen: false,
      manageForm: {},
      selGoodsId: undefined,
      //仓库信息
      stockInfo: null,
      // 仓库列表
      stockList: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 回收商品管理表格数据
      goodsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        likeGoodsId: null,
        collectId: null,
        goodsName: null,
        goodsSn: null,
        costPrice: null,
        stockId: null,
        confirmStatus: null,
        goodsStatus: null,
        testUserId: null,
        minPrice: null,
        maxPrice: null,
        printing: null,
        params: {},
        mount: null
      },
    };
  },
  created() {
    const stockId = this.$route.params && this.$route.params.stockId;
    this.queryParams.stockId = stockId;
    getStock(stockId).then(resp => {
      this.stockInfo = resp.data;
    })
    this.getList();
    this.getStockList();

    getDicts("goods_handle_type").then(res => {
      this.handleTypeOption = res.data;
    })
  },
  methods: {
    manageSubmitForm() {
      addArrange(this.manageForm).then(res => {
        this.getList();
        this.msgSuccess("操作成功");
        this.manageOpen = false;
      })
    },
    handleManage(row) {
      this.manageForm = {
        stockName: this.stockInfo.stockName,
        goodsId: row.goodsId,
        goodsName: row.goodsName,
        type: undefined,
        remark: undefined,
        status: 1
      }
      this.manageOpen = true;
    },
    goodsDetailCancel() {
      this.open = false;
      this.selGoodsId = undefined;
    },
    /* 获取此条数据的 价格历史*/
    getSalePriceList(row) {
      listPriceLog({goodsId: row.goodsId, status: 1}).then(res => {
        this.$set(row, "priceLogList", res.rows);
      })
    },
    /*最大价格区间*/
    maxPriceChange(e) {
      if(this.queryParams.maxPrice < this.queryParams.minPrice) {
        this.queryParams.maxPrice = null;
        this.msgError("不能小于最小价格！")
        return
      }
      this.$set(this.queryParams.params, "maxPrice", this.queryParams.maxPrice);
    },
    /*最小价格 change事件*/
    minPriceChange(e) {
      this.$set(this.queryParams.params, "minPrice", this.queryParams.minPrice);
    },
    /** 价格点击事件 */
    priceClick(row) {
      this.$set(row, 'emptyPrice', row.costPrice);
      setTimeout(function (){
        row.emptyPrice = null;
      }, 500)
    },


    /** 库存格式 */
    stockFormatter(row, column, collValue) {
      for (let i = 0; i < this.stockList.length; i++) {
        if(collValue === this.stockList[i].stockId) {
          return this.stockList[i].stockName;
        }
      }
    },
    /**获取仓库列表*/
    getStockList() {
      listStock({}).then(resp => {
        this.stockList = resp.rows;
      })
    },
    /** 查询回收商品管理列表 */
    getList() {
      this.loading = true;
      voidListGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.minPrice = null;
      this.queryParams.maxPrice = null;
      this.$delete(this.queryParams.params, "minPrice");
      this.$delete(this.queryParams.params, "maxPrice");
      this.handleQuery();
    },
    /** 查看详情按钮操作 */
    handleSearch(row) {
      this.open = true;
      this.title = row.goodsId + " 商品详情";
      this.selGoodsId = row.goodsId;
    },
    /** 设置行背景颜色 */
    setRowClassName(data) {
      const oneDay = 1000 * 60 * 60 * 24; //一天的时间
      let newDate = new Date();
      let longTime = newDate.getTime() - new Date(data.row.createTime).getTime();
      let day = longTime / oneDay;
      if(day >= 9) {
        return 'bg_red';
      }else if(day >= 6) {
        return 'bg_yellow';
      }else if(day >= 3) {
        return 'bg_green';
      }else {
        return "";
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有回收商品管理数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return exportGoods(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    }
  }
};
</script>

<style>
  .el-table .bg_red {
    color: red;
  }

  .el-table .bg_yellow {
    color: #E6A23C;
  }

  .el-table .bg_green {
    color: green;
  }
  .table-row {
    white-space: nowrap;
    overflow: hidden;
  }
</style>
